<template>
  <div id="pie-echart" :style="{width: '300px',minWidth: '300px', height: '300px'}">


  </div>
</template>

<script>
    export default {
        name: "pieEchart",
        props:{
            datas:{
                type:Object,
                default:function () {
                    return null
                }
            }
        },
        watch:{
            datas:{
                handler(newV,oldV){
                    if (newV){
                        if (this.chart && !this.isCreate){
                            this.isCreate = true;
                            this.createData(   )
                        }

                    }
                },
                immediate:true,
                deep:true
            }
        },
        data:function(){
            return{
                chart:null,
                isCreate:false,
            }
        },
        mounted() {
            this.chart = this.$echarts.init(document.getElementById('pie-echart'));
            if (this.datas && !this.isCreate){

                this.isCreate = true;
                this.createData()
            }
        },
        methods:{
            createData:function () {
                console.log(this.datas)
                var option;

                option = {
                    width:"300px",
                    height:"300px",
                    title: {
                        zlevel: 0,
                        text: ['{value|' + this.datas.pct + '%}', '{name|任务完成率}'].join('\n'),
                        top: '42%',
                        left: '48%',
                        textAlign: 'center',
                        textStyle: {
                            rich: {
                                value: {
                                    color: '#303133',
                                    fontSize: 24,
                                    lineHeight: 24,
                                },
                                name: {
                                    color: '#909399',
                                    fontSize: 18,
                                    lineHeight: 22,
                                },
                            },
                        },
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    // legend: {
                    //     bottom: '-7',
                    //     left: 'center',
                    //     orient:'horizontal',
                    //     textStyle:{
                    //         fontSize:14
                    //     }
                    // },
                    series: [
                        {
                            zlevel: 1,
                            name: this.datas.name,
                            type: 'pie',
                            radius: ['55%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 5
                            },
                            label: {
                                backgroundColor:'#fff',
                                show: false,
                                position: 'center',
                                textStyle : {
                                    fontWeight : 300 ,
                                    fontSize : 16    //文字的字体大小
                                },
                                formatter:function (value) {
                                    return value.percent + '%\n' + value.name
                                },
                                padding: [5, 5, 5, 5],
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold',
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: this.datas.data
                        }
                    ]
                };
                console.log(option)
                option && this.chart.setOption(option);
            }
        }
    }
</script>

<style scoped>

</style>
